<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑博客页面</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_edit.css">
    <script src="js/jQuery.min.js"></script>
    <!-- 引入Markdown第二步 -->
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/editor.md-master/css/editormd.min.css" />
    <script src="editor.md/editor.md-master/lib/marked.min.js"></script>
    <script src="editor.md/editor.md-master/lib/prettify.min.js"></script>
    <script src="editor.md/editor.md-master/editormd.js"></script>
</head>
<body>

    <!-- 导航栏 -->
    <div class="nav">
        <img src="Imag/导航栏头像.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个标签仅仅用于占位, 把这几个 a 标签挤到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_editor.html">写博客</a>
        <a href="login.html" id="exit">注销</a>
    </div>

    <div class="blog_eidt_container">
        <!-- 博客标题编辑区 -->

            <div class="blog-edit-container">
                <!-- 博客标题编辑区 -->
                <div class="title">
                    <input type="text" id="blog_title" placeholder="输入文章标题" name="blog_title">
                    <!-- <input type="submit" id="submit" value="发布文章"> -->
                    <button id="button">发布文章</button>
                </div>
                <!-- 博客编辑器, 这里用 id 是为了和 markdown 编辑器对接, 而设置的 -->
                <div id="editor">
                    <textarea name="content" id="content" style="display: none;"></textarea>
                </div>
            </div>


    <!--初始化 js -->
    <script>

        // 退出登陆
        let exit = document.querySelector('#exit');
        exit.onclick = function() {
            $.ajax({
                type:'get',
                url:'exit',
                contentType:'application/json; charset = utf8',
                success:function(body) {
                    if(body.issuccess == true) {
                        alert('注销成功!');
                        location.assign('login.html');
                        
                    } else {
                        alert('当前未登录, 无法执行该操作!');
                        return;
                    }
                }
            });
        }

        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "700px",
            // 编辑器中的初始内容
            
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/editor.md-master/lib/",
            saveHTMLToTextarea: true,
        });


        // 强制登录检测
        function forceLogin() {
            $.ajax({
                type: 'get',
                url: 'force',
                success: function(body) {
                    if(body.userId && body.userId > 0) {
                        // 登录成功
                        console.log("登录成功");
                        console.log(body.userId);
                    } else {
                        // 未登录强制跳转
                        location.assign('login.html');
                    }
                }
            });
        }

        forceLogin();

        let button = document.querySelector('#button'); 
        let title = document.querySelector('#blog_title');
        let content = document.querySelector('#content');

        button.onclick = function() {

            
            let body = {
                'title': title.value,
                'content':content.value
            }
            console.log(body.title);
            console.log(body.content);

            if(body.title.length <= 0) {
                alert('请编辑标题!');
                return;
            }

            if(body.content.length <= 0) {
                alert('请编写正文!')
                return;
            }


            $.ajax({
                type:'post',
                url: 'create',
                contentType: 'application/json; charset = utf8',
                data:JSON.stringify(body),
                success:function(body) {
                    if(body.issuccess == true) {
                        alert('发布成功!');
                        location.assign('blog_list.html');
                    }else {
                        alert('当前无此权限, 请检查!');
                        return;
                    }
                }
            });

            
        }

    </script>
</body>
</html>